<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        window.onload = function () {
            var u1 = document.getElementById("u1");

            //点击按钮后添加超链接
            var btn1 = document.getElementById("btn1");
            btn1.onclick = function () {
                //创建li
                var li = document.createElement("li");
                li.innerHTML = "<a href='javascript:;' class='link'>新添加的超链接</a>";

                // li添加到ul中
                u1.appendChild(li);
            }
            /*
                为每一个超链接都绑定一个单机响应函数 
                    这中操作比较麻烦 而且这种操作只能为已有的超链接设置事件，而新添加的超链接必须重新绑定
            */
            // var allA=document.getElementsByTagName("a");
            //遍历
            // for(var i=0;i<allA.length;i++){
            //     allA[i].onclick=function(){
            //         alert("我是a的单机响应函数");
            //     };
            // };
            /*
                我们希望只绑定一次事件，即可以应用到多个的元素上，即使元素是后添加的
                我们可以尝试将其绑定给元素的共同的祖先元素

                事件的委派
                    -指将事件统一绑定给元素的共同的祖先元素，这样当后代元素上的触发时，会一直冒泡到祖先元素
                        从而通过祖先元素的响应函数来处理事件
                    -事件委派是利用了冒泡，通过委派可以减少事件的绑定次数，提高程序的性能
            */
            //为u1绑定一个单机响应函数
            u1.onclick = function (event) {
                event = event || window.event;
                //如果触发事件的对象是我们期盼的元素，则执行，否则不执行
                /*
                    target
                        - event中的target表示的触发事件的对象
                */
                if (event.target.className == "link") {
                    alert("我是ul的单机响应函数");
                }
            }
        }
    </script>
</head>

<body>
    <button id=btn1>添加超链接</button>
    <ul id="u1">
        <li><a href="javascript:;" class="link">超链接一</a></li>
        <li><a href="javascript:;" class="link">超链接二</a></li>
        <li><a href="javascript:;" class="link">超链接三</a></li>
    </ul>
</body>

</html>